<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单测试</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/layui/layui.js"></script>
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>
</head>
<body>
<form class="layui-form" action="" lay-filter="test1">

    <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <!--
             lay-reqText="没有填写额。。"
             是当
             lay-verify="required"
             的时候
             提示的内容
            -->
            <input lay-reqText="没有填写额。。" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">email</label>
        <div class="layui-input-block">
            <!--
            lay-verify="email" 提交的时候会提示邮箱格式不正确

            lay-ignore	任意字符或不设值	是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格

            lay-verify	required（必填项）
            phone（手机号）
            email（邮箱）
            url（网址）
            number（数字）
            date（日期）
            identity（身份证）
            自定义值	同时支持多条规则的验证，格式：lay-verify="验证A|验证B"
            如：lay-verify="required|phone|number"
            另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证

            lay-verType
            tips（吸附层）
            alert（对话框）
            msg（默认）	用于定义异常提示层模式


             -->
            <input  type="text" name="email" lay-verify="email" class="layui-input" lay-ignore lay-verType="tips" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">测试手机号</label>
        <div class="layui-input-block">
            <!--
            autocomplete
            当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
             -->
            <input type="text" name="testPhone" required  lay-verify="required|phone|number" placeholder="请输入手机号" autocomplete="on" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select name="city" lay-verify="required"  lay-filter="select090">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[write]" title="写作" lay-filter="checkbox089">
            <input type="checkbox" name="like[read]" title="阅读" checked="checked">
            <input type="checkbox" name="like[dai]" title="发呆">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <input lay-filter="switch040" type="checkbox" name="switch" lay-skin="switch" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" lay-filter="danxuankuang">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-block">
            <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>

    /*{"title":"第三方三法师","password":"dsfsadfsafsd","city":"1","like[write]":"on",
        "like[read]":"on","like[dai]":"on","switch":"on","sex":"女",
        "desc":"大沙发水电费是否萨芬所发生的"}*/


    //Demo
    layui.use('form', function(){
        let $=layui.jquery;
        var form = layui.form;

        //给表单赋值,一般用于打开页面的时候
        form.val("test1", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "email": "563909408@qq.com" // "name": "value"
            ,"title": "卧槽"
            ,"password": 387687686
            ,"like[write]": true
            ,"switch": true
            ,"desc": "我爱layui"
        });

//获取表单区域所有值
        var data1 = form.val("test1");

        // {"title":"卧槽","email":"563909408@qq.com","testPhone":"","password":"387687686","city":"","like[write]":"on","like[read]":"on","switch":"on","sex":"女","desc":"我爱layui"}
        layer.alert(JSON.stringify(data1))

        // form.on('submit(*)', function(data){
        //     console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        //     console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        //     console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        //     return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        // });
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });

        // select 选择器选择项被点击之后但是没有选择之前触发
        form.on('select(select090)', function(data){
            //data.value是select的option的value
           alert(JSON.stringify(data));
            alert($(data.elem).html()); //得到select原始DOM对象
            alert(data.value); //得到被选中的值
            alert($(data.othis).html()); //得到美化后的DOM对象
        });

        //复选框之一框选择点击但还没有选择的时候触发
        form.on('checkbox(checkbox089)', function(data){
            alert(data.elem); //得到checkbox原始DOM对象
            alert(data.elem.checked); //是否被选中，true或者false
            alert(data.value); //复选框value值，也可以通过data.elem.value得到
            alert(data.othis); //得到美化后的DOM对象
        });

        //switch开关触发
        form.on('switch(switch040)', function(data){
            alert(data.elem); //得到checkbox原始DOM对象
            alert(data.elem.checked); //开关是否开启(点击后)，true或者false
            alert(data.value); //开关value值(点击后)，也可以通过data.elem.value得到
            alert(data.othis); //得到美化后的DOM对象
        });

        form.on('radio(danxuankuang)', function(data){
            alert(data.elem); //得到radio原始DOM对象
            alert(data.value); //被点击的radio的value值
        });



        //除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。
    // <input type="text" lay-verify="username" placeholder="请输入用户名">
    //         <input type="password" lay-verify="pass" placeholder="请输入密码">
                //  对应
        // form.verify({
        //     username: function(value, item){ //value：表单的值、item：表单的DOM对象
        //         if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
        //             return '用户名不能有特殊字符';
        //         }
        //         if(/(^\_)|(\__)|(\_+$)/.test(value)){
        //             return '用户名首尾不能出现下划线\'_\'';
        //         }
        //         if(/^\d+\d+\d$/.test(value)){
        //             return '用户名不能全为数字';
        //         }
        //     }
        //
        //     //我们既支持上述函数式的方式，也支持下述数组的形式
        //     //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
        //     ,pass: [
        //         /^[\S]{6,12}$/
        //         ,'密码必须6到12位，且不能出现空格'
        //     ]
        // });


        //下面的更新用于动态插入form的时候
        //form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
        //form.render('select', 'test1'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
    });



</script>
</body>
</html>